Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved styling of saving indicator #2734

Merged
merged 3 commits into from
Oct 5, 2022
Merged

Improved styling of saving indicator #2734

merged 3 commits into from
Oct 5, 2022

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Jul 20, 2022 •
edited
Loading

  • Target version: master

Summary

Improved the styling of the saving indicator on small screen sizes,
previously the contributors menu was overlapped by the saving indicator.
Also on dark color mode the saving indicator was inconveniently sticking out
by its bright (white) background color, it is now set to the main background color.

Note the overlapping of the indicator and menu and the background color of the saving indicator on lower screen width:
Before

before.mp4

After

after.mp4

@susnux susnux added enhancement New feature or request design Experience, interaction, interface, … 3. to review labels Jul 20, 2022
@susnux
Copy link
Contributor Author

susnux commented Jul 20, 2022

If your browser does not support mp4, this is the important part (screenshots):
Before:
before

After:
after

@susnux
Copy link
Contributor Author

susnux commented Jul 20, 2022

/compile

@juliushaertl
Copy link
Member

@jancborchardt I'm wondering if we should fine-tune the circle indicator a bit. It doesn't seem to obvious what it is about in its current state. The original design spec is from #2211

Could be combined with participants, showing a circle indicator on unsaved changes, and in the participants menu we can show extra text for "Last saved x minutes ago" on top of the participant list → let’s do this one

@susnux
Copy link
Contributor Author

susnux commented Jul 25, 2022

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Or a check mark icon within the saved indicator?

@mejo-
Copy link
Member

mejo- commented Jul 26, 2022

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Or a check mark icon within the saved indicator?

From #2211 my understanding would be that we want an outline around the avatar as a saved indicator. Additionally, a text "Last saved x minutes ago" on the top of the participants list.

Not sure whether all the stacked avatars should have the outline though. I guess it looks weird if only one has it.

@susnux
Copy link
Contributor Author

susnux commented Jul 26, 2022

To visualize:

Or a check mark icon within the saved indicator?

Saved indicator using a check mark
Saved indicator when not saved

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Using a outline on the collaborators menu as saving indicator
Using a outline on the collaborators menu as saving indicator

Additionally, a text "Last saved x minutes ago" on the top of the participants list.

This is already implemented

@mejo-
Copy link
Member

mejo- commented Jul 26, 2022

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Using a outline on the collaborators menu as saving indicator Using a outline on the collaborators menu as saving indicator

Thanks for the screenshots @susnux! How would this look like with several participants being active in the document?

@susnux
Copy link
Contributor Author

susnux commented Jul 26, 2022

How would this look like with several participants being active in the document?

I would say like this:
Screenshot_20220726_140405
Screenshot_20220726_140356

@juliushaertl
Copy link
Member

Looks good to me, @jancborchardt what do you think?

@jancborchardt
Copy link
Member

jancborchardt commented Jul 27, 2022 •
edited
Loading

I'd say for consistency it would be nice to use the same icon as we use in Office. :) It has a little dot indicator which is a bit more widely known and we can use it instead of the color border.

<svg width="24px" height="24px" fill="#000000" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/><circle cx="18" cy="18" r="3" fill="#0082c9" style="paint-order:markers fill stroke"/></svg>

@juliushaertl juliushaertl mentioned this pull request Aug 26, 2022
Open
25 tasks
@mejo-
Copy link
Member

mejo- commented Oct 4, 2022

Let's get this merged as it fixes the ugly white filled circle in dark mode. It doesn't replace the "saved" indicator with an icon (as suggested in #2734 (comment)), though. Let's tackle this in a follow-up PR - it's also tracked in #2836.

@mejo-
Copy link
Member

mejo- commented Oct 4, 2022

/compile

@mejo-
Copy link
Member

mejo- commented Oct 4, 2022

/backport to stable25

@susnux @mejo-
Improved styling of saving indicator
6bef7e6 
Improved the styling of the saving indicator on small screen sizes,
previously the contributors menu was overlapped by the saving indicator.
Also on dark color mode the saving indicator was inconveniently sticking out
by its bright (white) background color, it is now set to the main background color.

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
@mejo-
Copy link
Member

mejo- commented Oct 5, 2022

/compile

nextcloud-command and others added 2 commits October 5, 2022 01:01
@nextcloud-command
Compile assets
e1938a5 
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
@mejo-
Merge branch 'master' into fix/saved_state
9a69454
@mejo- mejo- merged commit 879eaec into master Oct 5, 2022
@mejo-
Copy link
Member

mejo- commented Oct 5, 2022

/backport 6bef7e6 to stable25

@delete-merged-branch delete-merged-branch bot deleted the fix/saved_state branch October 5, 2022 07:58
@backportbot-nextcloud backportbot-nextcloud bot mentioned this pull request Oct 5, 2022
Merged
1 task
@backportbot-nextcloud
Copy link

The backport to stable25 failed. Please do this backport manually.

@susnux susnux mentioned this pull request Dec 15, 2022
Merged
4 tasks
@blizzz blizzz mentioned this pull request Feb 9, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mejo- mejo- mejo- approved these changes

@jancborchardt jancborchardt Awaiting requested review from jancborchardt

@juliushaertl juliushaertl Awaiting requested review from juliushaertl

Assignees
No one assigned
Labels
3. to review design Experience, interaction, interface, … enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@susnux @juliushaertl @mejo- @jancborchardt @nextcloud-command